<template>
  <div class="main">
    <div class="box">
      <div class="padding_left">
        <div class="bg">
        </div>
        <p>更新日期: 4月17日</p>
      </div>
    </div>
    <!-- <div v-if="loadIsshow" class="dongcidaci">
      <img src="../../assets/img/dongcidaci.gif" alt="">
    </div> -->
   
    <van-skeleton 
      :row="20" 
      :loading="loading" 
      row-width="100%"
    
    >
      <MusicList :isshow='true' v-if="list" :sort='true' :list="list"></MusicList>
    </van-skeleton>
    <footer>

    </footer>
  </div>
</template>

<script>
import { Vue,Component,Prop } from 'vue-property-decorator'
import MusicList from '@c/MusicList.vue';
import { get } from '../../utils/http'

@Component({
  components: {
    MusicList
  }
})
export default class Hot extends Vue{
  list = ''
  loadIsshow = false
  loading = true
  async mounted () {
    const getData = async()=>{
      this.loadIsshow = true
      const newMusic = await  get({
        url:'/api/migu/list',
        params:{
          migu_url:'https://m.music.migu.cn/migu/remoting/cms_list_tag?nid=23603703&pageSize=200&pageNo=0',
        },
      })
      this.list = newMusic.data.result.results.splice(0,20)
      this.loadIsshow = false
      this.loading = false
    }
    getData()

  }
}
</script>

<style lang="stylus" scoped>
  .main
    .box
      height 1.61rem
      background-image url('../../assets/img/hot_bg.jpg')
      background-size: contain
      .padding_left
        padding  .2rem  
        .bg
          width 1.5656rem
          height .7387rem
          background-image url('../../assets/img/hot_xuebi.png')
          background-position: -.2646rem -.33076rem;
          background-size: 1.83rem 1.07rem;
        p
          color  #ffffff
          padding-top .1rem
          font-size .12rem
    footer
      height .567rem

  .dongcidaci
    position relative
    left 50%
    top .4rem
    margin-top .3rem
    img
      width .2rem
      height .2rem




</style>